<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 计价器厂商管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form ref="form" :model="form" label-width="110px" label-position="left" >
                <el-row :gutter="20">
                    <el-col :span="12"><div class="grid-content bg-purple">
                        <el-form-item label="用户名">

                            <el-select  class="handle-select" v-model="form.factname" clearable filterable placeholder="请选择">
                                <el-option
                                        v-for="item in factnameselectList"
                                        :key="item.id"
                                        :label="item.factname"
                                        :value="item.factname">
                                </el-option>
                            </el-select>

                        </el-form-item>
                    </div></el-col>
                    <el-col :span="12"><div class="grid-content bg-purple-light">

                        <el-button type="primary" icon="delete" style="margin-left: 30%" class="mr10" @click="search">查询</el-button>
                        <el-button type="primary" icon="delete" class="mr10" @click="all">显示全部</el-button>
                        <el-button type="primary" icon="search" class="mr10"  @click="handleAdd()" >新增</el-button>


                    </div>
                    </el-col>
                </el-row>

                <!-- 新增弹出框 -->
                <el-dialog title="新增" :visible.sync="addVisible" width="37%"  >
                    <el-form ref="form2" :model="form2"   label-width="125px" label-position="left" padding-left="5%">
                        <el-form-item label="计价器厂商"  prop="factname" :rules="[
                {required:true,message:'用户名不能为空'}
                ]">
                            <el-input class="handle-input" clearable v-model="form2.factname"></el-input>
                        </el-form-item>



                        <el-form-item label="备注">
                            <el-input type="textarea" rows="5" v-model="form2.memo"></el-input>
                        </el-form-item>

                    </el-form>
                    <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="addUser(form2)">确 定</el-button>
            </span>
                </el-dialog>


            </el-form>
            <el-table :data="tableData" border  v-loading="listLoading" class="table"  stripe>
                <el-table-column prop="factname"  align="center" label="计价器厂商名称" >
                </el-table-column>
                <el-table-column prop="memo" align="center" label="备注" >
                </el-table-column>
                <el-table-column label="操作" width="160" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-col :span="24" class="toolbar pageBar">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="pageSize"
                        layout=" prev, pager, next, sizes, total"
                        :total="total">
                </el-pagination>
            </el-col>
            <!--<div class="pagination">-->
            <!--<el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="1000">-->
            <!--</el-pagination>-->
            <!--</div>-->
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑" :visible.sync="editVisible" width="37%"  >
            <el-form ref="form3" :model="form3"   label-width="125px" label-position="left" padding-left="5%">
                <el-form-item label="计价器厂商名称" prop="factname" :rules="[
                {required:true,message:'计价器厂商名称不能为空'}
                ]">
                    <el-input class="handle-input" clearable v-model="form3.factname"></el-input>
                </el-form-item>


                <el-form-item label="备注">
                    <el-input type="textarea" rows="5" v-model="form3.memo"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit('form3')">确 定</el-button>
            </span>
        </el-dialog>


        <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>



<script>
    export default {
        name: 'Fact',
        data() {
            return {
                // url: 'http://localhost:9090',
                url:"/api",
                tableData: [],
                currentPage: 1,
                total: 0,
                page: 1,
                pageSize: 10,
                pageNum:1,
                totalnum:0,
                totalpage:1,

                factnameselectList:[],

                select_cate: '',
                select_word: '',
                del_list: [],
                is_search: false,
                editVisible: false,
                delVisible: false,
                addVisible:false,
                listLoading: false,


                form: {
                    factname: ''
                },
                form2: {
                    factname: '',
                    memo:''
                },
                form3: {
                    id:'',
                    factname: '',
                    memo:''
                },
                idx: -1
            }



        },
        created() {
            this.getData();
            this.$axios({
                method: 'get',
                url: this.url+"/fact/list",
            }).then((res) => {
                this.factnameselectList = res.data;
            });
        },
        methods: {
            //改变时
            handleSizeChange(val) {
                this.pageSize = val;
                console.log(this.pageSize);
                this.getData();
            },
            //条目改变时
            handleCurrentChange(val) {
                this.pageNum = val;
                console.log(this.pageNum);
                this.getData();
            },

            // created() {
            //     this.getData();
            // },
            //获取列表数据
            getData() {
                this.listLoading = true;
                this.$axios({
                    method: 'post',
                    url: this.url+"/fact/all?pageNum="+this.pageNum+"&pageSize="+this.pageSize,
                    data:this.form
                }).then((res) => {
                    console.log(res);
                    this.tableData = res.data.list;
                    this.total = res.data.totalnum;
                    this.page = res.data.totalpage;
                    this.listLoading = false;
                });

            },
            search() {
                this.is_search = true;
                this.getData();
            },


            all(){
                this.is_search = false;
                this.form.factname = "";
                this.getData();
            },

            filterTag(value, row) {
                return row.tag === value;
            },
            // handleAdd(index, row) {
            //     this.idx = index;
            //     const item = this.tableData[index];
            //     this.form = {
            //         name: item.name,
            //         date: item.date,
            //         address: item.address
            //     }
            //     this.editVisible = true;
            // },
            handleEdit(index, row) {
                this.idx = index;
                const item = this.tableData[index];
                this.form3 = {
                    id:item.id,
                    factname:item.factname,
                    memo:item.memo
                };
                this.editVisible = true;

            },
            handleAdd() {
                this.addVisible = true;
            },
            handleDelete(index, row) {
                this.idx = index;
                this.delVisible = true;
                const item1 = this.tableData[index];
                this.form3.id = item1.id;
            },
            handleDelete_add() {
                this.delVisible1 = true;
            },
            // delAll() {
            //     const length = this.multipleSelection.length;
            //     let str = '';
            //     this.del_list = this.del_list.concat(this.multipleSelection);
            //     for (let i = 0; i < length; i++) {
            //         str += this.multipleSelection[i].name + ' ';
            //     }
            //     this.$message.error('删除了' + str);
            //     this.multipleSelection = [];
            // },

            addUser(form2) {
                this.$refs.form2.validate((valid) => {
                    if (valid) {
                        console.log(this.form2);
                        this.$axios({
                            method: 'post',
                            url: this.url+"/fact/add",
                            data:this.form2
                        }).then((res) => {
                            if(res.data.message=="成功"){
                                this.$message.success(`添加成功`);
                                this.getData();
                                this.addVisible = false;
                                this.form2.factname = '';
                                this.form2.memo='';
                            }else {
                                this.$message.error(res.data.message);
                            }
                        }).catch(function (error) {
                            console.log(error);
                        });

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

                // let str = '';
                // this.del_list = this.del_list.concat(this.multipleSelection);
                // for (let i = 0; i < length; i++) {
                //     str += this.multipleSelection[i].name + ' ';
                // }
                // this.$message.error('删除了' + str);
                // this.multipleSelection = [];
            },
            // 保存编辑
            saveEdit(form3) {

                this.$refs.form3.validate((valid) => {
                    if (valid) {
                        this.$axios({
                            method: 'post',
                            url: this.url+"/fact/update",
                            data:this.form3
                        }).then((res) => {
                            console.log(res);
                            if(res.data.message=="成功"){
                                this.$message.success(`修改第 ${this.idx+1} 行成功`);
                                this.getData();
                            }else {
                                this.$message.error(res.data.message);
                            }
                        }).catch(function (error) {
                            console.log(error);
                        });
                        this.editVisible = false;
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

            },

            // 确定删除
            deleteRow(){
                this.$axios({
                    method: 'post',
                    url: this.url+"/fact/delete/"+this.form3.id,
                }).then((res) => {
                    console.log(res);
                    if(res.data.message=="成功"){
                        this.$message.success('删除成功');
                        this.delVisible = false;
                        this.getData();
                    }else {
                        this.$message.error(res.data.message);
                    }
                }).catch(function (error) {
                    console.log(error);
                });

            },



        }


    }


</script>

<style>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 300px;
    }
    .handle-add-select {
        width: 200px;
    }
    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .handle-add-input {
        width: 200px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        margin-top: 10px;
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
    .mr10{
        margin-right: 10px;
        width: 80px;
    }
    .customWidth{
        width:80%;
    }

</style>
